<section>
  <ngx-datatable
    #instancesTable
    class="material"
    [headerHeight]="headerHeight"
    [rowHeight]="rowHeight"
    columnMode="force"
    [footerHeight]="rowHeight"
    [rows]="instances"
    [loadingIndicator]="isLoading"
    selectionType="single"
    [sorts]="sorts"
    (select)="onSelect($event)">
    <ngx-datatable-column
      name="Status"
      prop="healthy"
      [width]="85"
      [resizeable]="false"
      [draggable]="false"
      [canAutoResize]="false">
      <ng-template let-row="row" ngx-datatable-cell-template>
        <mat-icon *ngIf="row.healthy" class="status-healthy">lens</mat-icon>
        <mat-icon *ngIf="!row.healthy && row.enabled" class="status-not-healthy" matTooltip="The instance is offline.">lens</mat-icon>
        <mat-icon *ngIf="!row.healthy && row.liveInstance" class="status-not-healthy" matTooltip="The instance is disabled.">lens</mat-icon>
        <mat-icon *ngIf="!row.healthy && !row.enabled && !row.liveInstance" class="status-not-healthy" matTooltip="The instance is offline and disabled.">lens</mat-icon>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Name">
      <ng-template let-row="row" ngx-datatable-cell-template>
        <section fxLayout="row" fxLayoutAlign="start center">
          {{ row.name }}
          <hi-disabled-label *ngIf="!row.enabled" text="DISABLED"></hi-disabled-label>
        </section>
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</section>
